<template>
  <div>
    <!--左边树形结构-->
    <div class="tree-menu">
      <myTree @menuSingleClickData="getMenuSingleClickData"/>
    </div>

    <!--右边显示内容-->
    <div class="rightDetails">

      <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="名称" style="width: 500px;">
          <el-input v-model="form.i18nPermName" :disabled="true"/>
        </el-form-item>

        <el-form-item label="是否要求" prop="">
          <el-switch v-model="form.isRequired"/>
        </el-form-item>

        <el-form-item label="编码">
          <el-input v-model="form.permCode"/>
        </el-form-item>

        <el-form-item label="名称">
          <el-input v-model="form.permName"/>
        </el-form-item>

        <el-form-item label="排序号" prop="">
          <el-input v-model="form.seq" type="text"/>
        </el-form-item>

        <el-form-item label="描述" prop="">
          <el-input v-model="form.description" type="textarea"/>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" >{{ $t('common.cancel') }}</el-button>
        <el-button :disabled="disabledT" type="primary" @click="updateData">修改</el-button>
      </div>

    </div>

  </div>
</template>

<script>
// 请求接口
import { fetchMenuList, viewPermission, updatePermission, delPermission, savePermission, saveMenu, updateMenu, delMenu } from '@/api/system'

// 组件
import myTree from './tree'

import { codeValidation } from '@/methods/codeValidation'

export default {
  name: 'Index',
  components: {
    myTree
  },
  data() {
    return {
      disabledT: true,

      form: {
        isRequired: null,
        i18nPermName: '',
        description: '',
        menuId: null,
        id: null,
        permCode: '',
        permName: '',
        seq: ''
      },

      dialogFormVisible: false,

      // 数据临时存储
      tempData: null,

      // 表单验证
      rules: {
        fileName: [
          { required: true, message: '请输入名称', trigger: 'blur' }
          // { min:2, max:5, message:'长度在2到5之间',trigger:'blur' }
        ]
      },

      // 单击选中的 节点ID
      parentId: ''

    }
  },
  created() {

  },
  methods: {

    // 获取单击选中 的数据 ,  并根据ID来查 相应的数据
    getMenuSingleClickData(data) {
      this.parentId = data.id
      var temp = {
        id: data.id
      }
      viewPermission(temp).then(response => {
        this.disabledT = false
        this.form = response.data.permission
      })
    },

    // 修改权限
    updateData() {
      var self = this
      const tempData = Object.assign({}, this.form)
      updatePermission(tempData).then(response => {
        var code = '0'
        var content = response.content
        codeValidation(code, content, self)
      })
    }
  }
}
</script>

<style>
  .tree-menu{
    width: 370px;
    float: left;
    overflow:auto;
    white-space:nowrap;
    padding-right: 10px;
  }
  .rightDetails{
    float: left;
    padding-left: 10px;
    padding-top: 10px;
  }
</style>
